<template>
	<svg :width="`${width}px`" :height="`${height}px`" viewBox="0 0 450 450" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" id="logo-svg">
		<title>通安信息</title>
		<defs>
			<polygon id="path-1" points="447.834868 0.724342105 0.473684211 2.61315789 2.36447368 450.185526 449.935855 448.294737 448.045066 0.724342105"></polygon>
			<polyline id="path-3" points="447.834868 0.724342105 0.473684211 2.61315789 2.36447368 450.185526 449.935855 448.294737 448.045066 0.724342105"></polyline>
			<polyline id="path-5" points="447.834868 0.724342105 0.473684211 2.61315789 2.36447368 450.185526 449.935855 448.294737 448.045066 0.724342105"></polyline>
			<polyline id="path-7" points="447.834868 0.724342105 0.473684211 2.61315789 2.36447368 450.185526 449.935855 448.294737 448.045066 0.724342105"></polyline>
			<polygon id="path-9" points="447.834868 0.724342105 0.473684211 2.61315789 2.36447368 450.185526 449.935855 448.294737 448.045066 0.724342105"></polygon>
		</defs>
		<g id="通安信息" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
			<g id="编组" transform="translate(0.000000, -2.000000)">
				<g transform="translate(0.000000, 0.266447)">
					<mask id="mask-10" fill="white">
						<use xlink:href="#path-9"></use>
					</mask>
					<g id="Clip-10"></g>
					<path
						d="M199.973487,89.4572368 L77.8695395,362.571711 L141.398487,362.303289 L220.354737,185.695066 L265.076447,283.498026 C283.291579,276.443092 302.007039,270.819079 321.039276,266.686184 L239.923816,89.2884868 L199.973487,89.4572368 Z"
						id="Fill-9"
						:fill="fillColor[0]"
						mask="url(#mask-10)"
						data-llp-id="logo-step-1"
						:data-llp-duration="duration"
						:data-llp-delay="stepDelay * 0"
						data-llp-ease="easeInOutExpo"
						:data-llp-stroke-color="fillColor[0]"
					></path>
				</g>
				<g transform="translate(0.000000, 0.266447)">
					<mask id="mask-2" fill="white">
						<use xlink:href="#path-1"></use>
					</mask>
					<g id="Clip-2"></g>
					<path
						d="M321.469737,231.644408 C229.003618,242.332895 140.991118,287.285526 77.8983553,362.571711 L141.403618,362.304276 C195.989803,309.790461 264.200329,276.295066 336.140132,263.726645 L321.469737,231.644408 Z"
						id="Fill-1"
						:fill="fillColor[1]"
						mask="url(#mask-2)"
						data-llp-id="logo-step-2"
						:data-llp-duration="duration"
						:data-llp-delay="stepDelay * 1"
						data-llp-ease="easeInOutExpo"
						:data-llp-stroke-color="fillColor[1]"
					></path>
				</g>
				<g transform="translate(0.000000, 0.266447)">
					<mask id="mask-4" fill="white">
						<use xlink:href="#path-3"></use>
					</mask>
					<g id="Clip-4"></g>
					<path
						d="M271.439507,297.414868 L300.802007,361.631645 L333.102336,361.495461 L299.334572,287.641184 C289.92898,290.5425 280.624046,293.798092 271.439507,297.414868"
						id="Fill-3"
						:fill="fillColor[2]"
						mask="url(#mask-4)"
						data-llp-id="logo-step-3"
						:data-llp-duration="duration"
						:data-llp-delay="stepDelay * 2"
						data-llp-ease="easeInOutExpo"
						:data-llp-stroke-color="fillColor[2]"
					></path>
				</g>
				<g transform="translate(0.000000, 0.266447)">
					<mask id="mask-6" fill="white">
						<use xlink:href="#path-5"></use>
					</mask>
					<g id="Clip-6"></g>
					<path
						d="M302.228191,286.775526 L336.386743,361.480461 L361.045954,361.376842 L324.233783,280.869276 C316.84727,282.622895 309.510099,284.591645 302.228191,286.775526"
						id="Fill-5"
						:fill="fillColor[3]"
						mask="url(#mask-6)"
						data-llp-id="logo-step-4"
						:data-llp-duration="duration"
						:data-llp-delay="stepDelay * 3"
						data-llp-ease="easeInOutExpo"
						:data-llp-stroke-color="fillColor[3]"
					></path>
				</g>
				<g transform="translate(0.000000, 0.266447)">
					<mask id="mask-8" fill="white">
						<use xlink:href="#path-7"></use>
					</mask>
					<g id="Clip-8"></g>
					<path
						d="M327.199934,280.159638 L364.329868,361.362928 L380.752895,361.293849 L342.220658,277.027401 C337.195658,277.972796 332.187434,279.016875 327.199934,280.159638"
						id="Fill-7"
						:fill="fillColor[4]"
						mask="url(#mask-8)"
						data-llp-id="logo-step-5"
						:data-llp-duration="duration"
						:data-llp-delay="stepDelay * 4"
						data-llp-ease="easeInOutExpo"
						:data-llp-stroke-color="fillColor[4]"
					></path>
				</g>
			</g>
		</g>
	</svg>
</template>

<script>

import LazyLinePainter from 'lazy-line-painter'
import { defineComponent, onMounted } from 'vue'
export default defineComponent({
	name: 'logo',
	props: {
		width: {
			type: Number,
			default: 450
		},
		height: {
			type: Number,
			default: 450
		},
		duration: {
			type: Number,
			default: 1000
		},
		stepDelay: {
			type: Number,
			default: 200
		},
		strokeWidth: {
			type: Number,
			default: 2
		},
		fillColor: {
			type: Array,
			default () {
				return [
					'#066EB7',
					'#066eb7',
					'#36B16E',
					'#F0C85B',
					'#EA5D52'
				]
			}
		}
	},
	setup (props, context) {
		onMounted(() => {
			const el = document.querySelector('#logo-svg')
			const logoAnimation = new LazyLinePainter(el, {
				strokeWidth: props.strokeWidth,
				strokeJoin: 'miter'
				// ease: 'easeInOutExpo'
			})

			logoAnimation.on('start:all', event => {
				event.el.classList.remove('path-complete')
			})
			logoAnimation.on('complete:all', event => {
				event.el.classList.add('path-complete')
			})
			logoAnimation.on('complete', () => {
				setTimeout(() => {
					context.emit('logoComplete')
				}, 500)
			})
			logoAnimation.paint()
		})
	}
})
</script>

<style lang="scss" scoped>
path {
	fill-opacity: 0;
	transition: fill-opacity 0s ease-in-out, stroke-width 0s ease-in-out;
	&.path-complete {
		transition-duration: 0.5s;
		fill-opacity: 1;
		stroke-width: 0!important;
	}
}

</style>
